@import './md.css';

html,
body,
#app {
	margin: 0;
	padding: 0;
}

html.dark {
	color: #e5e7eb;
	background: #e5e7eb;
}

.prose {
	scroll-behavior: smooth;
}

#nprogress {
	pointer-events: none;
}

#nprogress .bar {
	@apply bg-blue-700 bg-opacity-75;

	background: repeating-linear-gradient(90deg, #00dc82 0, #34cdfe 50%, #0047e1);
}

/*
* 全局滚动条
*/
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
	background-color: rgb(246, 247, 248);
}

::-webkit-scrollbar-thumb {
	background-color: rgb(233, 236, 239);
	border-radius: 10px;
}

::-webkit-scrollbar-track {
	background-color: rgb(246, 247, 248);
	border-radius: 10px;
}

html.dark ::-webkit-scrollbar,
html.dark ::-webkit-scrollbar-track {
	background-color: #212529;
}

html.dark ::-webkit-scrollbar-thumb {
	background-color: #343a40;
}

body {
	background-image: radial-gradient(
			closest-side,
			rgba(241, 172, 157, 1),
			rgba(235, 105, 78, 0)
		),
		radial-gradient(closest-side, rgb(7, 92, 75), rgba(243, 11, 164, 0)),
		radial-gradient(closest-side, rgb(64, 145, 14), rgba(254, 234, 131, 0)),
		radial-gradient(closest-side, rgb(234, 135, 7), rgba(170, 142, 245, 0));
	background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
	background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
	background-repeat: no-repeat;
	animation: 15s moiveAnimation infinite;
}

@keyframes moiveAnimation {
	0%,
	100% {
		background-size: 130vw 130vh, 120vw 120vh, 100vw 150vh, 120vw 130vh;
		background-position: -80vw -80vh, 30vw -20vh, -20vw 20vh, 30vw 20vh;
	}
	25% {
		background-size: 120vw 120vh, 130vw 150vh, 130vw 120vh, 100vw 110vh;
		background-position: -30vw -30vh, 40vw -10vh, 0vw 10vh, -10vw 20vh;
	}
	50% {
		background-size: 130vw 130vh, 140vw 100vh, 100vw 150vh, 90vw 110vh;
		background-position: 10vw -60vh, 20vw 10vh, 10vw 30vh, 10vw -20vh;
	}
	75% {
		background-size: 140vw 140vh, 100vw 130vh, 100vw 150vh, 130vw 110vh;
		background-position: -70vw -70vh, 0vw -10vh, 30vw -20vh, 20vw 30vh;
	}
}

.footer {
	height: 48px;
	line-height: 48px;
	text-align: center;
	background-color: rgba(165, 67, 67, 1);
	color: #fff;
}

.setting {
	position: absolute;
	left: 25px;
	bottom: 25px;
	float: left;
}

.search {
	margin: 5vh 30vw 0 30vw;
}

.content {
	margin: 5vh 20vh 0 20vh;
}
